<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  " style="align-items: center;">
			<view class="flex2  flex-sub   flex flex-wrap justify-start  " style="flex-direction: column;">
				<text class="text3 text-bold "> 学习记录</text>
			</view>
		</view>
		<view class="flex4   response  flex flex-wrap justify-center  ">
			<view class="flex5   response  flex flex-wrap justify-between  " v-for="(item,index) in log_list"
				style="flex-direction: row;align-items: center;">
				<image class="picture6 radius  radius" style="width:322rpx;height:228rpx;min-height:unset;"
					:src="item.education_id[0].cover.url"></image>
				<view class="flex7  flex-sub   flex flex-wrap justify-start  "
					style="flex-direction: column;align-content: space-between;">
					<text class="text8 response "> {{item.education_id[0].theme}}</text>
					<text class="text8 response ">学习次数:{{item.education_id[0].count || 0}}</text>
					<text
						class="text8 response ">学习时长:{{item.study_time<60 || 0 ?item.study_time+"s":item.study_time/60+"分钟"}}</text>
					<text class="text8 response ">学习进度:{{item.progress || 0}}%</text>
					<view class="flex9   response  flex flex-wrap justify-between  " style="align-items: center;">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	const db = uniCloud.database()
	let abu_db = db.collection('abu-study-log,abu-theme-study');
	export default {
		data() {
			return {
				user_info: {},
				log_list: []
			};
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			await this.load_cunrrent_user_info();
			const data = await abu_db.where({
				member_id: this.user_info.uid
			}).get();
			// console.log(data.result.data);
			this.log_list = data.result.data;
			uni.hideLoading()
		},
		methods: {
			async load_cunrrent_user_info() {
				this.user_info = await uniCloud.getCurrentUserInfo()
			},


		}
	}
</script>

<style lang="less">
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex2 {
		width: 69%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text3 {
		font-size: 36rpx;
	}

	.flex4 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture6 {
		width: 100%;
		height: 228rpx;
	}

	.flex7 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text8 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex9 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex11 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture12 {
		width: 100%;
		height: 228rpx;
	}

	.flex13 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text14 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex15 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
</style>